<template>
  <div class="container" :style="{ height: height }">
    <div class="title_container">
      <span class="title"></span>
      <span style="margin-left: 10px; font-size: 20px; color: #1cdbfe">
        智能化建设情况</span
      >
    </div>
    <div>
      <div
        ref="chart"
        style="width: 100%"
        :style="{ height: chartHeight }"
      ></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getIntellijDevice } from '@/api/dataScreen/index';
export default {
  data() {
    return {
      height: '270px',
      chartHeight: '240px',
      chart: null,
      chartData: [],
    }
  },
  props: {
    isFullscreen: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    renderChart() {
      getIntellijDevice().then((res) => {
        this.chart = echarts.init(this.$refs.chart);
        this.chartData = res.intellijDevice
        const option = {
          grid: {
            x: '10%',
            width: '92%',
            y: '0',
            left: "8%",
            top: "50px",
            bottom: '50px',
          },
          tooltip: {
            trigger: 'item',
            backgroundColor: '#040737',
            borderColor: '#0E8BFF', // 设置边框颜色，这里是绿色
            borderWidth: 2, // 设置边框宽度，这里是2像素
            textStyle: {
              // 设置文本样式
              color: '#ffffff', // 设置文本颜色
              fontSize: 16, // 设置文本字体大小
            },
            axisPointer: {
              // 禁用轴线
              type: 'none',
            },
          },
          xAxis: {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#4FA6F7', // X轴颜色
              },
            },
            axisTick: { show: false },
            axisLabel: {
              color: '#4FA6F7', // X轴字的颜色
              interval: 0,
              fontSize: 14,
              formatter: function (value) {
                // 自定义换行逻辑
                if (value.length > 4) {
                  return value.slice(0, 4) + '\n' + value.slice(4)
                } else {
                  return value;
                }
              },
            },
            data: this.chartData.map((item) => item.typeName),
          },
          yAxis: {
            type: 'value',
            splitLine: { show: false },
            name: "(件)",
            axisLine: {
              show: true,
              lineStyle: {
                color: '#4FA6F7', // X轴颜色
              },
            },
            axisTick: { show: false },
            axisLabel: {
              fontSize: 14,
              color: '#4FA6F7', // Y轴字的颜色
            },
          },
          series: [
            {
              type: 'bar',
              barWidth: 15,
              label: {
                show: true,
                position: 'top',
                color: '#FFF', // 上方显示value值的颜色
                formatter: '{c}', // 显示value值
              },
              itemStyle: {
                borderRadius: [10, 10, 10, 10], // 圆角
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0.8,
                      color: '#151952', // 渐变起始颜色
                    },
                    {
                      offset: 0,
                      color: '#0DDE9C', // 渐变结束颜色
                    },
                  ],
                },
              },
              data: this.chartData.map((item) => item.num),
            },
          ],
        };

        this.chart.setOption(option)
      });
    },
  },
  // watch: {
  //   isFullscreen: {
  //     handler(newValue, oldValue) {
  //       if (newValue == true) {
  //         this.height = '300px';
  //         this.chartHeight = "270px";
  //         this.$nextTick(() => {
  //           this.chart.resize();
  //         })
  //       } else {
  //         this.height = '270px';
  //         this.chartHeight = "240px";
  //         this.$nextTick(() => {
  //           this.chart.resize();
  //         })
  //       }
  //     },
  //   },
  // },
  mounted() {
    this.renderChart();
  },
};
</script>
<style scoped lang="scss">
.container {
  //height: 270px;
  padding: 10px 20px;
  //background: #06073B;
  border-radius: 7px;
  box-shadow: rgb(8, 79, 160) 0px 0px 40px inset;
  border: 2px solid rgb(8, 79, 160);
  background-color: transparent;
  .title_container {
    display: flex;
    align-items: center;
    .title {
      width: 13px;
      height: 27px;
      background: #1cdbfe;
      border-radius: 6px;
      display: inline-block;
    }
  }
}
</style>
